<template>
  <el-dialog
    :title="!dataForm.id ? '光谱曲线' : '光谱曲线'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div class="mod-demo-echarts">
      <el-card>
        <div id="positive" class="chart-box"></div>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
      },
      amplitude: [],
    };
  },
  methods: {
    // 初始化图形
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$http({
        url: this.$http.adornUrl("/generator/amplitude/getOneAmplitude"),
        method: "get",
        params: this.$http.adornParams({
          dataId: this.dataForm.id,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.amplitude = data.amplitudePositive;
          this.initChart();
        }
      });
      // this.$nextTick(() => {
      //   // this.$refs["dataForm"].resetFields();
      //   if (this.dataForm.id) {
      //     this.$http({
      //       url: this.$http.adornUrl("/generator/amplitude/getOneAmplitude"),
      //       method: "get",
      //       params: this.$http.adornParams({
      //         dataId: this.dataForm.id,
      //       }),
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         alert(this.amplitude);
      //         this.amplitude = data.amplitudePositive;
      //         this.initChart();
      //       }
      //     });
      //   }
      // });
    },
    initChart() {
      var option = {
        title: {
          text: "光谱",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "value",
          name: "波长(nm)",
          min: 1509.09,
          max: 1595.52,
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          name: "幅度",
        },
        series: [
          {
            type: "line",
            data: this.amplitude,
          },
        ],
      };
      this.chartLinePositive = echarts.init(
        document.getElementById("positive")
      );
      this.chartLinePositive.setOption(option);
      window.addEventListener("resize", () => {
        this.chartLinePositive.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-alert {
    margin-bottom: 10px;
  }
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
